<!DOCTYPE html>
<html lang="en">
<style>

.chart {

}

.chart rect {
    fill: steelblue;
}

.chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
}


    
</style>
<svg class="chart"></svg>


<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

    var width=420, barHeight=40;
    
    var chart = d3.select(".chart").attr("width", width);
    
    var convertType = function(d) {
        d.value = parseInt(d.value);
        return d;
    }


    d3.tsv("data.tsv", convertType, function(error, data) {
        var max = d3.max(data, function(d) {
            return d.value;
        });

        console.log("max=" + max);
        console.log("width=" + width);
        var x = d3.scale.linear().domain([0, d3.max(data, function(d) {return d.value;})]).range([0, width]);

        console.log(x(4));

        var height = data.length * barHeight;
        var g = chart.attr("height", height)
            .selectAll("g").data(data).enter()
            .append("g").attr("transform", function (d, i) {
                return "translate(0, " + (barHeight * i) + ")";
            });
        g.append("rect").attr("width", function(d) {return x(d.value);}).attr("height", barHeight - 1);
        g.append("text").attr("x", function(d){return x(d.value) - 3;}).attr("y", (barHeight - 1) / 2).attr("dy", "3.5").text(function(d){return d.value;});
    });
    
    

    
    
</script>